<template>
    <div class="list-item" @click="$emit('click')">
        <i class="list-icon oa-icon" v-show="icon" :style="{color:iconColor}" :class="icon"></i>
        <label class="list-title">{{title}}</label>
        <slot name="right"></slot>
        <i class="oa-icon list-arrow icon-jiantou"></i>
    </div>
</template>

<script>
    export default {
        name: "oa-list-item",
        props: {
            icon: {
                default: ""
            },
            title: {
                default: ""
            },
            iconColor: {
                default: "#000000"
            }
        }
    }
</script>

<style scoped lang="less">
    .list-item {
        padding: 0 12px;
        height: 40px;
        border-bottom: solid 1px #eeeeee;
        display: flex;
        background: #ffffff;
        flex-direction: row;
        align-items: center;
        &:active {
            background: darken(#fff, 5%);
        }
        .list-icon {
            font-size: 24px;
            margin-right: 12px;
        }
        .list-title {
            flex: 1;
        }
        .list-arrow {
            margin-left: auto;
            font-size: 12px;
            color: #888888;
        }
    }
</style>